<template>
  <div class="modification-dialog">
    <eleDialog ref="dialogRef">
      <template #header>
        <p class="title">个人信息(点击修改)</p>
      </template>
      <template #content>
        <div class="content">
          <el-form
            label-width="40px"
            :model="modificationForm"
            ref="activityFormRef"
            :rules="rules"
            :hide-required-asterisk="true"
          >
            <el-form-item label="昵称" prop="name">
              <el-input v-model="modificationForm.name"></el-input>
              <div style="margin-top: 10px">
                <el-button size="medium" @click="modificationForm.name = ''">清空</el-button>
                <el-button size="medium" type="primary" @click="modificationName"
                  >立即修改</el-button
                >
              </div>
            </el-form-item>

            <el-form-item label="头像" prop="avatar">
              <eleSingleUpload ref="uploadRef" upload-folder="Avatar"></eleSingleUpload>
              <div style="margin-left: 10px">
                <el-button size="medium" type="primary" @click="modificationAvatar"
                  >立即修改</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- <template #footer>sdfsdf</template> -->
    </eleDialog>
  </div>
</template>

<script setup lang="ts">
import eleSingleUpload from "@/components/ele-singleUpload/ele-singleUpload.vue"
import eleDialog from "@/components/ele-dialog/ele-dialog.vue"

import { messageReminder } from "@/utils/notificationHint"
import type { FormRules } from "element-plus"
import { reactive, ref } from "vue"
import { updateAvatar, updateName } from "@/service/user/user"
import type { IUserInfo } from "../type"

interface IProps {
  userInfo: IUserInfo
}
const props = withDefaults(defineProps<IProps>(), {})

const dialogRef = ref<InstanceType<typeof eleDialog>>()

const uploadRef = ref()
// uploadRef.value.coverUrl

const modificationForm = reactive({
  name: props.userInfo.name
})

// 校验规则
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入需要修改的昵称", trigger: "blur" }]
})

// 修改昵称
async function modificationName() {
  const newName = modificationForm.name.trim()
  if (!newName) {
    messageReminder({
      message: "请输入需要修改的昵称",
      type: "info"
    })
    return
  }
  if (newName == props.userInfo.name) {
    return
  }
  let result = await updateName(newName)
  if (result.data.code == 200) {
    messageReminder({
      message: `更新昵称成功`,
      type: "success"
    })
  } else {
    messageReminder({
      message: `请求更新错误:${result.data.message}`,
      type: "error"
    })
  }
}

// 修改头像
async function modificationAvatar() {
  const newAvatar = uploadRef.value.coverUrl

  if (!newAvatar) {
    messageReminder({
      message: "请选择需要修改的昵称",
      type: "info"
    })
    return
  }

  let result = await updateAvatar(newAvatar)
  if (result.data.code == 200) {
    messageReminder({
      message: `更新头像成功`,
      type: "success"
    })
  } else {
    messageReminder({
      message: `请求更新错误:${result.data.message}`,
      type: "error"
    })
  }
}

defineExpose({
  dialogRef
})
</script>

<style lang="less" scoped>
.modification-dialog {
  .title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
  }

  .content {
    padding: 0 20px;

    // .img {
    //   width: 70px;
    //   height: 70px;
    //   border-radius: 50%;
    //   margin-right: 10px;
    // }
  }
}
</style>
